<template>
  <div class="onhook-config-container">
    <edu-page-tabs :tab-list="tabs" />
    <el-form ref="form" :model="formData" label-width="140px">
      <el-form-item label="操作">
        <div>
          <span>批量设置已创建的点播课程，</span><el-link :underline="false" type="primary" @click="courseSettingVisible=true">点击此处</el-link>
        </div>
      </el-form-item>
      <el-form-item label="验证方式" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio-button :label="1">弹窗验证</el-radio-button>
          <el-radio-button :label="2">弹题验证</el-radio-button>
          <el-radio-button :label="3">人脸识别</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- 弹窗验证 -->
      <div v-if="formData.type === 1">
        <el-form-item label="最大验证次数" prop="alert_max_number">
          <el-input-number v-model="formData.alert_max_number" :min="1" />
        </el-form-item>
        <el-form-item label="验证时间间隔" prop="alert_time_interval">
          <el-input-number v-model="formData.alert_time_interval" :min="1" />
          <div class="edu-tips">以分钟为单位</div>
        </el-form-item>
        <el-form-item label="提示语" prop="alert_content">
          <el-input
            v-model="formData.alert_content"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8}"
            placeholder="弹出层提示语"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </div>
      <!-- 弹窗验证 end-->
      <!-- 弹题验证 -->
      <div v-else-if="formData.type === 2">
        <el-form-item label="最大验证次数" prop="answer_max_number">
          <el-input-number v-model="formData.answer_max_number" :min="1" />
        </el-form-item>
        <el-form-item label="验证时间间隔" prop="answer_time_interval">
          <el-input-number v-model="formData.answer_time_interval" :min="1" />
          <div class="edu-tips">以分钟为单位</div>
        </el-form-item>
        <el-form-item label="答错继续学习" prop="answer_pass">
          <el-switch
            v-model="formData.answer_pass"
            :active-value="1"
            :inactive-value="0"
          />
          <div class="edu-tips">开启表示作答后不论对错即可继续学习</div>
        </el-form-item>
        <el-form-item v-show="formData.answer_pass === 0" label="最大连续错题次数" prop="answer_max_count">
          <el-input-number v-model="formData.answer_max_count" :min="1" />
          <div class="edu-tips">连续答错次数超过最大次数时可继续学习</div>
        </el-form-item>
      </div>
      <!-- 弹题验证 end-->
      <!-- 人脸识别 -->
      <div v-else-if="formData.type === 3">
        <el-form-item label="最大验证次数" prop="face_max_number">
          <el-input-number v-model="formData.face_max_number" :min="1" />
        </el-form-item>
        <el-form-item label="验证时间间隔" prop="face_time_interval">
          <el-input-number v-model="formData.face_time_interval" :min="1" />
          <div class="edu-tips">以分钟为单位</div>
        </el-form-item>
        <el-form-item label="云API密钥-SecretId" prop="face_secret_id">
          <el-input v-model="formData.face_secret_id" placeholder="请输入内容" />
          <div class="edu-tips">推荐创建子账号,赋予子账号人脸识别权限</div>
        </el-form-item>
        <el-form-item label="云API密钥-SecretKey" prop="face_secret_key">
          <el-input v-model="formData.face_secret_key" placeholder="请输入内容" />
          <div class="edu-tips">推荐创建子账号,赋予子账号人脸识别权限</div>
        </el-form-item>
        <el-form-item label="默认人员库名称" prop="face_group_name">
          <el-input v-model="formData.face_group_name" placeholder="请输入内容" />
          <div class="edu-tips">默认为：eduline-v5人脸库</div>
        </el-form-item>
        <el-form-item label="默认人员库ID" prop="face_group_id">
          <el-input v-model="formData.face_group_id" placeholder="请输入内容" />
          <div class="edu-tips">默认为：eduline-v5</div>
        </el-form-item>
      </div>
      <form-footer :loading="disableSubmit" confirm-btn-text="保存" :cancel-btn="false" fixed @submit="saveConfig" />
    </el-form>
    <el-dialog title="批量设置已创建的点播课程防挂机配置" :visible="courseSettingVisible" width="40%" top="15vh" :close-on-click-modal="false" @close="handlerCourseSettingClose">
      <div>
        <el-radio-group v-model="courseOnhookType">
          <el-radio :label="0">全部取消</el-radio>
          <el-radio :label="1">全部为弹窗验证</el-radio>
          <el-radio :label="2">全部为弹题验证</el-radio>
          <el-radio :label="3">全部为人脸验证</el-radio>
        </el-radio-group>
      </div>
      <div slot="footer">
        <el-button type="primary" size="small" :disabled="disableSubmit" @click="handlerCourseSettingConfirm">确认</el-button>
        <el-button size="small" @click="handlerCourseSettingClose">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EduPageTabs from '@public/template/tabs/page_tabs.vue';
import FormFooter from '@/components/form-footer'

export default {
  name: 'Onhook',
  components: {
    EduPageTabs,
    FormFooter
  },
  data() {
    return {
      configKey: 'system.onhook',
      tabs: [
        {
          title: '防挂机配置',
          uri: '/system/config/onhook',
          meta: {
            permission: 'system.config.onhook'
          }
        }
    ],
      disableSubmit: false,
      formData: {
        type: 1,
        alert_max_number: 1,
        alert_time_interval: 5,
        face_max_number: 1,
        face_time_interval: 5,
        answer_max_number: 1,
        answer_time_interval: 5,
        answer_pass: 1,
        answer_max_count: 2
      },
      courseSettingVisible: false,
      courseOnhookType: undefined
    }
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  },
  created() {
    this.loadConfig()
  },
  methods: {
    // 加载配置
    loadConfig() {
      this.$http.get(
          '/admin/system/config',
          {
            __key: this.configKey
          },
          ({ data }) => {
            this.formData = { ...this.formData, ...data }
          },
          error => {
            this.$message.error(error.msg);
          },
          false
      );
    },
    // 保存配置
    saveConfig() {
      this.disableSubmit = true
      this.$http.post(
          '/admin/system/config/save',
          {
            ...this.formData,
            __key: this.configKey
          },
          response => {
            this.$message.success(response.msg)
            this.disableSubmit = false;
          },
          error => {
            this.disableSubmit = false;
            this.$message.error(error.msg);
          },
          false
      );
    },
    // 关闭课程设置弹出层
    handlerCourseSettingClose() {
      this.courseSettingVisible = false
    },
    // 提交课程设置
    handlerCourseSettingConfirm() {
      this.disableSubmit = true
      this.$http.put(
          '/course/admin/batch/updated/onhook_type',
          {
            onhook_type: this.courseOnhookType
          },
          response => {
            this.$message.success(response.msg)
            this.disableSubmit = false;
            this.handlerCourseSettingClose()
          },
          error => {
            this.disableSubmit = false;
            this.$message.error(error.msg);
          },
          false
      );
    }
  }
}
</script>

<style scoped lang="scss">
.onhook-config-container{
  width: 60%;
}
</style>
